<!--
 * @Author: wangding
 * @Date: 2020-11-02 15:46:49
 * @LastEditTime: 2021-03-22 17:48:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\inverter\index.vue
-->
<template>
    <div class="inverter-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('device.inverter.SN')}}</span>
                <el-input style="width:160px;" v-big v-model="querylist.SN" :placeholder="$t('device.inverter.SN')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('site.siteName')}}</span>
                <el-input style="width:160px;" v-model="querylist.siteName" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('user.loginName')}}</span>
                <el-input style="width:160px;" v-model="querylist.loginName" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.wifiSN')}}</span>
                <el-input style="width:160px;" v-big v-model="querylist.wifiSN" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('device.inverter.enableFlag')}}</span>
                <el-select v-model="querylist.enableFlag" filterable :placeholder="$t('pleaseSelect')" :clearable='true'>
                    <el-option
                    v-for="item in textDataList.ON_LINE_STATE"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('device.inverter.nation')}}</span>
                <el-select v-model="querylist.nation" filterable :placeholder="$t('pleaseSelect')" :clearable='true'>
                    <el-option
                    v-for="item in countryList"
                    :key="item.enName"
                    :label="item.enName"
                    :value="item.enName">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('inventoryManage.type')}}</span>
                <el-select v-model="querylist.inverterType" filterable :placeholder="$t('pleaseSelect')" :clearable='true'>
                    <el-option
                    v-for="item in textDataList.INVERTER_TYPES"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub" v-if='userType == 2'>
                <span class="lable-text">{{$t('device.subscription.group')}}</span>
                <el-select v-model="querylist.subGroupId" filterable :placeholder="$t('pleaseSelect')" :clearable='true'>
                    <el-option
                    v-for="item in groupName"
                    :key="item.sid"
                    :label="item.groupName"
                    :value="item.sid">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
                <el-button v-if='userType == 1 || userType == 2' type="primary" @click='exportModalNew'>{{$t('export')}}</el-button>
                <el-button v-else  type="primary" @click='exportModal'>{{$t('export')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe :column='column' >
            <template #SN="{data}">
                <a href="javascript:;" class="hover-a-link" style="color:#ED7523;" @click='openSnDetail(data)'>{{data.SN}}</a>
            </template>
            <template #inverterType="{data}">
                {{comm.returnCode(textDataList.INVERTER_TYPES,data.inverterType,'value','code')}}
            </template>
            <template #enableFlag="{data}">
                <span :style='data.enableFlag==1?"color:#429dff":""'>
                    <i class="iconfont icon-wifi" style="vertical-align: middle;" ></i>
                    {{returnStatus(data.enableFlag)}}
                </span>
            </template>
            <template #option="{data}">
                <div class="option-box">
                    
                    <el-button size='small' type="primary" icon="el-icon-s-tools"  @click='showFlowModal(data)'  :title="$t('device.inverter.js_role_setting')" v-if='userType == 2 || userType == 5'></el-button>

                    <el-button size='small' type="primary" icon="el-icon-s-management"  @click='showPvModulesModal(data)'  :title='$t("device.inverter.js_pv_modules")'></el-button>
                    
                    <el-button size='small' type="primary" :icon="!data.isSub ?'iconfont icon-xingxing1':'iconfont icon-xingxing'"  @click='showGroupModal(data)'  :title='!data.isSub?$t("device.inverter.js_no_subscription"):$t("device.inverter.js_is_subscription")' v-if='userType == 2'></el-button>

                    <el-button size='small' type="primary" icon="el-icon-chat-line-square"  @click='showRemarkModal(data)'  :title='$t("introduce")'></el-button>

                    <el-button v-if='data.deviceType == 1 && userType ==5' size='small' type="primary" icon="el-icon-unlock"  @click='showPasswordModal(data)'  :title='$t("devWifi.passwordQuery")'></el-button>
                    
                    <el-popconfirm
                        :title="$t('device-confirm-untie')"
                        :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('cancel')"
                        @confirm='wifiUnbundlingWifiSN(data)'
                        v-if='userType==5'
                    >
                        <el-button size='small' type="primary" icon="el-icon-crop" slot="reference"  :title='$t("devWifi.unbundling")'></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <flowModal :flowModalWifuSn='flowModalWifuSn' :textDataList='textDataList'></flowModal>
        <remarkModal :remarkModalWifuSn='remarkModalWifuSn' :remarkModalNote='remarkModalNote' @uploadData='query'></remarkModal>
        <setGroupModal :groupRowData='groupRowData'  ></setGroupModal>
        <pvModules :modulesRowData='modulesRowData' @uploadData='query'></pvModules>
        <importModal :querylist='querylist'></importModal>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import moment from 'moment'
import flowModal from './flowModal'
import remarkModal from './remark'
import setGroupModal from './setGroup'
import pvModules from './pvModules'
import importModal from './import'
export default {
    components: {
        baseTable,
        flowModal,
        remarkModal,
        setGroupModal,
        pvModules,
        importModal
    },
    props: {

    },
    data() {
        return {
            siteId:this.$route.query.siteId,
            userId:this.$route.query.userId,
            businessId:this.$route.query.businessId,
            querylist:{
                SN:'',
                siteName:'',
                loginName:'',
                wifiSN:'',
                enableFlag:'',
                nation:'',
                inverterType:'',
                subGroupId:'',
                isSub:1,
                currentTime:moment().format("YYYY-MM-DD"),
            },
            size:10,
            current:1,
            statusList:[],
            countryList:[],
            textDataList:{},
            groupName:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('device.inverter.SN'),
                value: 'SN',
                slot: 'SN'
            },
            {
                title: this.$t('devWifi.wifiSN'),
                value: 'wifiSN',
                slot: 'wifiSN',
            },
            {
                title: this.$t('device.inverter.inverterType'),
                value: 'inverterType',
                slot: 'inverterType'
            },{
                title: this.$t('device.inverter.ratedPower'),
                value: 'ratedPower',
                slot: 'ratedPower',
                min_width:"110"
            },{
                title: this.$t('totalPower.InverterPower.siteId'),
                value: 'siteName',
                slot: 'siteName',
            },
            {
                title: this.$t('user.loginName'),
                value: 'loginName',
                slot: 'loginName'
            },{
                title: this.$t('test.deviceTest.real_time.todayYield') + '(kWh)',
                value: 'todayYield',
                slot: 'todayYield',
                min_width:"150"
            },{
                title: this.$t('test.deviceTest.real_time.totalYield') + '(kWh)',
                value: 'totalYield',
                slot: 'totalYield',
                min_width:"150"
            },
            {
                title: this.$t('m_497927264244072448'),
                value: 'enableFlag',
                slot: 'enableFlag'
            },{
                title: this.$t('devWifi.accessTime'),
                value: 'accessTime',
                slot: 'accessTime',
            },{
                title: this.$t('opttask.option'),
                value: 'sid',
                slot: 'option',
            }],
            total:1,
            flowModalWifuSn:'',
            remarkModalWifuSn:'',
            remarkModalNote:'',
            groupRowData:{},
            modulesRowData:{}
        };
    },
    computed: {
        userType(){
            return localStorage.getItem('userType')
        }
    },
    watch: {

    },
    created() {
       if(this.$route.query.siteName){
            this.querylist.siteName = this.$route.query.siteName
        }
        this.selectCountry()
        this.getDictionaryBatch()
        this.deviceGetSubGroupName()
    },
    mounted() {
        
    },
    methods: {
        async showPasswordModal(data){
            let res = await this.API.snGetPassword({
                wifiSN:data.wifiSN
            })
            if(res){
                this.$confirm(this.$t('backup_password')+':'+res)
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            }else{
                this.comm.showMsg(false)
            }
        },
        async exportModalNew(){
            let res = await this.API.deviceCheckCount(this.querylist)
            if(res > 20){
                this.comm.showMsg(false,this.$t('download.count_lt_20'))
            }else if(res == 0){
                this.comm.showMsg(false,this.$t('download.count_is_zero'))
            }else{
                this.$store.commit('setDictionaryVisible',true)
            }
        },
        async wifiUnbundlingWifiSN(data){
            let res = await this.API.wifiUnbundlingWifiSN({
                ids:data.wifiSNId
            })
            if(this.comm.showMsg(res.success)){
                this.query()
            }
        },
        exportModal(){
            this.comm.windowOpen('/device/inverterExcel',{
                sn:this.querylist.SN,
                siteName:this.querylist.siteName,
                loginName:this.querylist.loginName,
                wifiSN:this.querylist.wifiSN,
                enableFlag:this.querylist.enableFlag,
                inverterType:this.querylist.inverterType,
                // inverterType:this.querylist.inverterType,
                // inverterType:this.querylist.inverterType,
                // inverterType:this.querylist.inverterType,
            })
        },
        openSnDetail(data){
            console.log(data)
            sessionStorage.setItem("selRow_inverterType",data.inverterType);
            sessionStorage.setItem("selRow_siteid",data.siteIds);
            sessionStorage.setItem("selRow_inverter_sn",data.SN);
            sessionStorage.setItem("selRow_wifi_sn",data.wifiSN);
            sessionStorage.setItem("selRow_firmId",data.firmIds);
            sessionStorage.setItem("selRow_sn_type",2);//逆变器
            sessionStorage.setItem("selRow_phase_type",data.phaseFlag);
            sessionStorage.setItem("selRow_battery_type",data.batteryFlag);
            sessionStorage.setItem("selRow_load_type",data.loadFlag);
            sessionStorage.setItem("selRow_siteId",data.siteIds);
            sessionStorage.setItem("selRow_batteryTypeFlag",data.batteryType);//电池类型
            sessionStorage.setItem("selRow_userId",data.userIds);
            sessionStorage.setItem("selRow_epsStatus",data.epsStatus);
            
            let url = this.$router.resolve({
                path: "/overview-inverter",
            });
            window.open(url.href, '_blank');
        },
        showPvModulesModal(data){
            this.modulesRowData = data
            this.$store.commit('setNewVisiblePvModules',true)
        },
        showGroupModal(data){
            this.groupRowData=data
            this.$store.commit('setNewVisibleGroup',true)
        },
        showRemarkModal(data){
            this.remarkModalWifuSn = data.wifiSN
            this.remarkModalNote = data.note
            this.$store.commit('setNewVisibleRemark',true)
        },
        showFlowModal(data){
            this.flowModalWifuSn = data.wifiSN
            this.$store.commit('setNewVisibleFlow',true)
        },
        returnStatus(flag){
            let code = ''
            if(!this.textDataList){
                return
            }
            this.textDataList.ON_LINE_STATE.forEach(item =>{
                if(item.value == flag){
                    code = item.code
                }
            })
            return code
        },
        async deviceGetPage(){
            this.loading = true
            let params={}
            //电站管理的传参
            if(this.siteId) params.siteId=this.siteId
            if(this.businessId) params.businessId=this.businessId
            if(this.userId) params.userId=this.userId

            let res = await this.API.deviceGetPage(Object.assign({},this.querylist,{
                size:this.size,
                current:this.current
            },params))
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        async selectCountry(){
            let res = await this.API.selectCountry()
            this.countryList = res || []
        },
        async deviceGetSubGroupName(){
            let res = await this.API.deviceGetSubGroupName()
            this.groupName = res
        },
        async getDictionaryBatch(){
            this.loading = true
            let res = await this.API.getDictionaryBatch({
                dictCodes:'ON_LINE_STATE,INVERTER_TYPES,IS_PUBLIC,SALER_TYPE,INTELBARS_INVERTER_TYPES',
                lang:localStorage.getItem('lan') || 'zh_CN'
            })
            this.textDataList = res || {}
            this.loading = false
            this.deviceGetPage()
        },
        query(){
            this.current = 1
            this.deviceGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.deviceGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.deviceGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>
.inverter-main-box{
    .hover-a-link:hover{
        text-decoration: underline;
    }
}
</style>
